<template>
    <view>
        <u-navbar :title="$t('反馈问题')" />
        <view class="wrap">
            <!-- 反馈提示 -->
            <view v-if="popInformaion" class="parse-text" style="display: flex;">
                <u-icon name="volume-up" color="#fa3534" size="42" style="position: absolute;top:18rpx" /><u-parse
                    :html="popInformaion" class="parse-p" style="line-height: 1.7;font-size: 26rpx;" />
            </view>
            <u-empty :text="$t('列表为空')" mode="list" v-if="feedList.length == 0" class="empty-css" />
            <view class="list" v-for="item in feedList" :key="item.id" @click="toDetail(item)">
                <view class="left-con">
                    <view class="title">{{ item.problem_desc }}</view>
                    <view class="times">{{ item.create_time }}</view>
                </view>
                <view class="right-btn">
                    <u-icon size="28" style="margin-right: 10rpx;"
                        :name="item.status == 0 ? 'error-circle' : item.status == 1 ? 'checkmark-circle' : 'close-circle'"
                        :color="item.status == 0 ? '#2979ff' : item.status == 1 ? '#19be6b' : '#fa3534'" />
                    <span :style="{ color: item.status == 0 ? '#2979ff' : item.status == 1 ? '#19be6b' : '#fa3534' }">
                        {{ item.status == 0 ? $t('待审核') : item.status == 1 ? $t('审核通过') : $t('驳回') }}
                    </span>
                </view>
            </view>
        </view>
        <view class="tabbar-bottom">
            <view class="tab-item" @click="toback">
                <u-icon name="edit-pen" color="#303133" size="50" />
                <view class="tab-text">{{$t('意见反馈')}}</view>
            </view>
            <view class="tab-item">
                <u-icon name="man-add" :color="current == 2 ? '#19be6b' : '#303133'" size="50" />
                <view class="tab-text" style="color: #19be6b;">{{$t('我的反馈')}}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            current: 2,
            feedList: [],
            popInformaion: ''
        };
    },
    onLoad() {
        this.getList();
        this.getRules();
    },
    onShow() {
		if (!uni.getStorageSync("user")) {
			uni.redirectTo({
				url:'/pages/my/login'
			})
		}
        this.getList();
    },
    methods: {
        toDetail(info) {
            uni.setStorageSync("feed", info);
            uni.navigateTo({
                url: "/pagesA/pages/my/feedback",
            });
        },
        getList() {
            this.$http({
                url: "api/message_feedback/index",
                data: {
                    uid: uni.getStorageSync('user').id
                },
            })
                .then((result) => {
                    if (result.data.code == 1) {
                        this.feedList = result.data.data
                    }
                })
                .catch((err) => { });
        },
        toback() {
            uni.setStorageSync("feed", '');
            uni.navigateTo({
                url: "/pagesA/pages/my/feedback",
            });
        },
        getRules() {
            this.$http({
                url: "api/common/get_pop_informaion",
                data: {
                    type: 1,
                },
            })
                .then((res) => {
                    if (res.data.code == 1) {
                        this.popInformaion = res.data.data.info;
                    }
                })
                .catch((err) => { });
        },
    }
}
</script>

<style>
page {
    background-color: #f4f4fc;
    font-family: "Microsoft Yahei";
}

.empty-css {
    margin-top: 30% !important;
}

.list {
    background-color: #fff;
    width: 100%;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #ddd;
    position: relative;
}

.list .left-con {
    width: 70%;
}

.list .right-btn {
    position: absolute;
    right: 20rpx;
}

.list .title {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.list .times {
    color: #999;
    font-size: 20rpx;
    margin-top: 15rpx;
}

.tabbar-bottom {
    width: 100%;
    height: 140rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 2rpx solid #ccc;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tab-item .tab-text {
    margin-top: 10rpx;
}

.parse-text {
    display: flex;
    background-color: #fdf6ec;
    padding: 18rpx 20rpx;
    font-size: 14rpx !important;
    color: #f90;
    position: relative;
}

.parse-p {
    position: relative;
    left: 26rpx;
    padding-right: 22rpx;
    box-sizing: border-box;
}
</style>